<template>
	<d2-container>
		<!-- 搜索 -->
		<template slot="header" class="query-area">
			<el-form ref="searchForm" :model="searchForm" class="header-area" label-width="74px" style="height:auto">
				<el-row>
					<el-col :span="3">
						<el-form-item label="请客规则" prop="ruleId">
							<el-select v-model="searchForm.ruleId" placeholder="请选择" style="width: 100%;">
								<el-option label="不限" value=""></el-option>
								<el-option :label="item.ruleName" :value="item.id" v-for="item of ruleList" :key="item.id"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="订单编号" prop="orderNo">
							<el-input v-model="searchForm.orderNo" placeholder="请输入订单编号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="请客会员昵称" prop="inviteUserName" label-width="100px">
							<el-input v-model="searchForm.inviteUserName" placeholder="请输入昵称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="被邀请人昵称" prop="inviteeUserName" label-width="100px">
							<el-input v-model="searchForm.inviteeUserName" placeholder="请输入昵称"></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="6">
						<el-form-item label="时间范围" prop="time">
							<el-date-picker
								v-model="time"
								type="datetimerange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="timestamp"
								align="right"
								:default-time="['00:00:00', '23:59:59']"
								style="width: 100%;"
							></el-date-picker>
						</el-form-item>
					</el-col>
					
					<el-col :span="3">
						<div class="search-submit">
							<el-button type="primary" size="medium" @click="submitForm('searchForm')">查询</el-button>
							<el-button size="medium" @click="resetForm('searchForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</template>
		
		<template>
			<el-table :data="tableData" border style="width: 100%; margin-bottom: 20px;">
				<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
				
				<el-table-column prop="orderNo" label="订单编号" width="250"></el-table-column>
				<el-table-column prop="ruleName" label="请客标题（请客规则）"></el-table-column>
				<el-table-column prop="productCouponName" label="请客送券名称" width="180"></el-table-column>
				<el-table-column prop="quantity" label="送券数量" width="120" align="center"></el-table-column>
				
				<el-table-column prop="inviteUserName" label="请客会员昵称" width="180"></el-table-column>
				<el-table-column prop="inviteeUserName" label="被邀请人昵称" width="180"></el-table-column>
				
				<el-table-column prop="createTime" label="请客时间" :formatter="forDate" width="200"></el-table-column>
				
				<el-table-column fixed="right" label="操作" width="140">
					<template slot-scope="scope">
						<el-button type="primary" size="small" @click="openDetail(scope.row)">查看详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		
		<!-- 页脚部分 -->
		<template slot="footer">
			<div class="page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="searchForm.currentPage"
					:page-size="searchForm.pageSize"
					:total="total"
					:page-sizes="[10, 20, 50, 100]"
					layout="total, sizes, prev, pager, next, jumper"
				></el-pagination>
			</div>
		</template>
		
		<!-- 弹窗 -->
		<template>
			<el-dialog title="订单详情" width="1000px" :visible.sync="isShowDetail" :before-close="closeOrderDetail">
				<div class="form-area">
					<el-form label-width="120px" style="height:auto">
						<el-row>
							<el-col :span="12">
								<el-form-item label="订单编号">
									<el-input v-model="orderDetail.orderNo" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="请客时间">
									<el-input :value="forDateFilter(orderDetail.createTime)" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						
						<el-row>
							<el-col :span="24">
								<el-form-item label="请客标题">
									<el-input v-model="orderDetail.ruleName" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						
						<el-row>
							<el-col :span="12">
								<el-form-item label="请客送券名称">
									<el-input v-model="orderDetail.productCouponName" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="送券数量">
									<el-input v-model="orderDetail.quantity" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						
						<el-row>
							<el-col :span="12">
								<el-form-item label="请客会员昵称">
									<el-input v-model="orderDetail.inviteUserName" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="被邀请人昵称">
									<el-input v-model="orderDetail.inviteeUserName" readonly></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
				
				<div class="dialog-footer" slot="footer">
					<el-button @click="closeOrderDetail">关 闭</el-button>
				</div>
			</el-dialog>
		</template>
	</d2-container>
</template>

<script>
	import { getInviteOrderList, getInviteOrderDetail } from '@api/order/myTreat'
	import { findCouponBonusRuleListByPage } from '@api/activity/couponBonusRule'
	import dayjs from 'dayjs'
	export default {
		data() {
			return {
				searchForm: {
					orderNo: '',
					ruleId: '',
					ruleCode: '',
					inviteUserName: '',
					inviteeUserName: '',
					createTimeBegin: '',
					createTimeBegin: '',
					currentPage: 1,
					pageSize: 10,
				},
				time: [],
				ruleList: [],
				
				tableData: [],
				total: 0,
				loading: false,
				
				isShowDetail: false,
				orderDetail: '',
			}
		},
		methods: {
			getData() {
				if(this.loading) {
					return;
				}
				this.loading = true;
							
				this.searchForm.createTimeBegin = this.time[0] == null ? null : dayjs(this.time[0]).format('YYYY-MM-DD HH:mm:ss');
				this.searchForm.createTimeBegin = this.time[1] == null ? null : dayjs(this.time[1]).format('YYYY-MM-DD HH:mm:ss');
				getInviteOrderList(this.searchForm)
					.then(res => {
						this.tableData = res.data.content;
						this.total = res.data.total;
						this.loading = false;
					})
					.catch(() => {
						this.loading = false;
					})
			},
			handleSizeChange(val) {
				this.searchForm.pageSize = val;
				this.getData();
			},
			handleCurrentChange(val) {
				this.searchForm.currentPage = val;
				this.getData();
			},
			resetPage() {
				this.searchForm.currentPage = 1;
				this.searchForm.pageSize = 10;
				this.total = 0;
			},
			
			submitForm(formName) {
				this.resetPage();
				this.getData();
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.time = [];
				this.resetPage();
				this.getData();
			},
			
			forDate(row, column) {
				var formatTime = ''
				if (column.property == 'createTime') {
					formatTime = row.createTime == null ? '-' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss');
				}
				return formatTime;
			},
			forDateFilter(val) {
				var formatTime = ''
				formatTime = val == null ? '-' : dayjs(val).format('YYYY-MM-DD HH:mm:ss');
				return formatTime;
			},
			
			getRuleList() {
				findCouponBonusRuleListByPage({
					currentPage: 1,
					pageSize: 9999
				})
					.then(res => {
						let list = res.data.content;
						let newList = [];
						list.forEach(item => {
							if(item.ruleType == 2) {
								newList.push(item);
							}
						});
						this.ruleList = newList;
					})
					.catch(err => {
						console.log('err', err);
					})
			},
			
			openDetail(item) {
				this.isShowDetail = true;
				getInviteOrderDetail({myTreatOrderId: item.id})
					.then(res => {
						this.orderDetail = res.data;
					})
			},
			closeOrderDetail() {
				this.isShowDetail = false;
			}
		},
		mounted() {
			this.getData();
			this.getRuleList();
		}
	}
</script>

<style>
</style>